<template>
  <view class="setting-page">
    <!-- 设备号输入区域（输入框 + 提交按钮同一行） -->
    <text class="label">设备号：</text>
    <view class="form-row">
      <input class="input-box" type="text" placeholder="请输入设备号" placeholder-style="color:#999" v-model="deviceNo"
        cursor-color="#ddd" />
      <button class="submit-btn" @click="eqCodeSubmit">提交</button>
    </view>

    <!-- 服务器地址修改区域（输入框 + 提交按钮同一行） -->
    <text class="label">服务器地址：</text>
    <view class="form-row">
      <input class="input-box" type="text" placeholder="请输入服务器地址" placeholder-style="color:#999" v-model="newUrl"
        cursor-color="#ddd" />
      <button class="submit-btn" @click="serverAddrSubmit">修改</button>
    </view>

    <!-- 触发通知的按钮 -->
    <view class="button-group">
      <button class="action-btn" @click="showNotification">点击发送通知</button>
      <button class="action-btn" @click="fetchLocation">点击获取位置</button>
      <button class="action-btn test-btn" @click="navigateToRing">更换通知铃声</button>
      <button class="action-btn test-btn" @click="networkTest">网络测试</button>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'
  import {
    onLoad,
    onShow
  } from '@dcloudio/uni-app'

  // 通知示例
  import {
    showNotification
  } from '../../utils/notification.js'
  // 获取定位示例
  import {
    getLocationInfo
  } from '../../utils/locationUtils.js'

  const locationInfo = ref(null)



  const deviceNo = ref('')
  const newUrl = ref('')

  onLoad(() => {
    const savedDeviceNo = uni.getStorageSync('deviceNo')
    if (savedDeviceNo) {
      deviceNo.value = savedDeviceNo
    }
    const baseUrl = uni.getStorageSync('baseUrl')
    if (baseUrl) {
      newUrl.value = baseUrl
    }
  })

  const eqCodeSubmit = () => {
    uni.setStorageSync('deviceNo', deviceNo.value)
    // uni.showToast({
    //   title: '设备号已保存',
    //   icon: 'success',
    //   duration: 2000
    // });
    uni.showModal({
      title: '提示',
      icon: 'none',
      content: '设备号已保存，应用需要重启才能生效。是否立即重启？',
      confirmText: '立即重启',
      cancelText: '稍后',
      success(res) {
        if (res.confirm) {
          // 用户点击了“立即重启”
          uni.showToast({
            title: '应用即将重启...',
            icon: 'none',
            duration: 2000,
            complete: () => {
              // 在toast显示后延迟重启，让用户看到提示
              setTimeout(() => {
                plus.runtime.restart();
              }, 2000);
            }
          });
        }
      }
    })
  }

  // 设置新的 baseUrl 并持久化存储
  const serverAddrSubmit = () => {
    uni.setStorageSync('baseUrl', newUrl.value)
    uni.showModal({
      title: '提示',
      icon: 'none',
      content: '服务器地址已修改，应用需要重启才能生效。是否立即重启？',
      confirmText: '立即重启',
      cancelText: '稍后',
      success(res) {
        if (res.confirm) {
          // 用户点击了"立即重启"
          uni.showToast({
            title: '应用即将重启...',
            icon: 'none',
            duration: 2000,
            complete: () => {
              // 在toast显示后延迟重启，让用户看到提示
              setTimeout(() => {
                plus.runtime.restart();
              }, 2000);
            }
          });
        } else {
          // 用户点击了"稍后"
          uni.navigateBack()
        }
      }
    })
  }

  const fetchLocation = () => {
    console.log('用户点击了获取位置按钮');

    // 显示加载提示
    uni.showLoading({
      title: '获取位置中...',
      mask: true
    });

    // 调用工具类获取位置
    getLocationInfo((result) => {
      // 隐藏加载提示
      uni.hideLoading();

      if (result.success) {
        locationInfo.value = result.data;
        console.log('位置信息获取成功:', result.data);

        // 在安卓设备上显示成功提示
        // #ifdef APP-PLUS
        if (plus.os.name === 'Android') {
          uni.showToast({
            title: '位置获取成功，请查看控制台日志',
            icon: 'success',
            duration: 3000
          });
        }
        // #endif

        showLocationPopup();
      } else {
        // 失败提示
        console.log('位置获取失败:', result.message);
        uni.showToast({
          title: result.message,
          icon: "none",
          duration: 3000
        });
      }
    });
  }
  // 弹窗展示位置信息
  const showLocationPopup = () => {
    const {
      latitude,
      longitude,
      city,
      district,
      street,
      address
    } = locationInfo.value;

    // 拼接展示文本（处理可能的undefined）
    const locationText = `
    经纬度：
    ${latitude}, ${longitude}
    
    位置信息：
    ${city || ''}${district || ''}${street || ''}
    ${address || ''}
      `.trim();

    // 弹窗展示
    uni.showModal({
      title: "当前位置",
      content: locationText,
      showCancel: false,
      confirmText: "确定"
    });
  }

  // 跳转铃声设置界面
  const navigateToRing = () => {
    uni.navigateTo({
      url: '/pages/Setting/RingSetting/RingSetting',
    });
  }

  const networkTest = () => {
    // window.open('http://61.27.43.30:10536')
    uni.navigateTo({
      url: '/pages/webview/webview'
    })
  }
</script>

<style lang="scss" scoped>
  .setting-page {
    padding: 32rpx;
    background-color: #555;
    min-height: 100vh;
  }

  /* 每行容器：标签 + 输入框 + 按钮 横向排列 */
  .form-row {
    display: flex;
    align-items: center;
    margin-top: 30rpx;
    margin-bottom: 30rpx;
    /* 行间距 */
    width: 100%;
    gap: 16rpx;
    /* 元素间间距 */
  }

  /* 标签样式 */
  .label {
    font-size: 48rpx;
    color: #ddd;
    white-space: nowrap;
    /* 防止标签换行 */
    width: 200rpx;
    /* 固定标签宽度，确保对齐 */
  }

  /* 输入框样式 */
  .input-box {
    flex: 1;
    /* 输入框占满剩余空间 */
    height: 80rpx;
    border: 1px solid #ccc;
    border-radius: 8rpx;
    padding: 0 20rpx;
    font-size: 36rpx;
    color: #ddd;
    background-color: #666;
  }

  /* 按钮样式 */
  .submit-btn {
    width: 160rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background-color: #007aff;
    color: #fff;
    font-size: 42rpx;
    border-radius: 8rpx;
    margin: 0;
    /* 清除默认margin */
  }

  .button-group {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: 30rpx;
    gap: 16rpx;
  }

  .action-btn {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background-color: #007aff;
    color: #fff;
    font-size: 42rpx;
    border-radius: 8rpx;
  }

  .test-btn {
    background-color: #4CAF50;
    /* 绿色按钮 */
  }
</style>